<template>
  <div class="box">
    <h2>Child111 component</h2>
    <p>msg: {{msg}}</p>
  </div>
</template>
<script lang="ts" setup>
  import PubSub from 'pubsub-js'
  import emit from './eventbus'
  import { onBeforeUnmount, onMounted, ref } from 'vue';

  const msg = ref('abc')

  onMounted(() => {
    PubSub.subscribe('updateBrother', (msgName, data) => {
      msg.value += data
    })
    emit.on('updateBrother', (data) => {
      msg.value += data
    })
  })

  onBeforeUnmount(() => {
    PubSub.unsubscribe('updateBrother')
    emit.off('updateBrother')
  })
</script>
